
<template>
  <div id="app">
    <div id="Map" ref="mapObj"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, MultiPolygon } from "ol/geom";
import { defaults as defaultControls, OverviewMap } from "ol/control";
import { fromLonLat } from "ol/proj";

import { onMounted, ref } from "vue";
import areaGeo from "@/assets/bianjie.json";


export default {
  name: "shadow",
  setup() {
    let map = null;
    let mapObj = ref(null);

    const initMap = () => {
      map = new Map({
        target: "Map",
        controls: defaultControls({
          zoom: true
        }).extend([]),
        layers: [
          new TileLayer(
            {
              source: new XYZ({
                url:
                  "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
              })
            },
            { zoomOffset: 1 }
          )
        ],
        view: new View({
          center: fromLonLat([108.522097, 37.272848]),
          zoom: 4.7,
          maxZoom: 19,
          minZoom: 4
        })
      });
    }

    let areaLayer = null;
    const addArea = (geo = []) => {
      if (geo.length == 0) return false;
      let areaFeature = null;
      // 设置图层
      areaLayer = new VectorLayer({
        source: new VectorSource({
          features: []
        })
      });
      // 添加图层
      map.addLayer(areaLayer);
      geo.forEach(g => {
        let lineData = g.features[0];
        if (lineData.geometry.type == "MultiPolygon") {
          areaFeature = new Feature({
            geometry: new MultiPolygon(
              lineData.geometry.coordinates
            ).transform("EPSG:4326", "EPSG:3857")
          });
        } else if (lineData.geometry.type == "Polygon") {
          areaFeature = new Feature({
            geometry: new Polygon(
              lineData.geometry.coordinates
            ).transform("EPSG:4326", "EPSG:3857")
          });
        }
      });
      areaFeature.setStyle(
        new Style({
          fill: new Fill({ color: "#4e98f499" }),
          stroke: new Stroke({
            width: 3,
            color: [71, 137, 227, 1]
          })
        })
      );
      areaLayer.getSource().addFeatures([areaFeature]);
    }

    onMounted(() => {
      initMap();
      addArea(areaGeo);
    })

    return {
      mapObj
    }
  }
};
</script>

<style lang='scss' scoped>
#app, #Map {
  height: 90vh;
}
</style>
